<template>
  <div class="margin1-top">
    <div class="title-row">
      <div class="title-left">主管单位</div>
      <div v-for="(item, index) in zgdw">
        <a :class="{ blue: changeZgdw == index }" @click="change1(index)">{{
          item.name
        }}</a>
      </div>
    </div>
    <div class="title-row">
      <div class="title-left">建设性质</div>
      <div v-for="(item, index) in jsxz">
        <a :class="{ blue: changeJsxz == index }" @click="change2(index)">{{
          item.name
        }}</a>
      </div>
    </div>
    <div class="title-row">
      <div class="title-left">报送时间</div>
      <div v-for="(item, index) in gllx">
        <a :class="{ blue: changeGllx == index }" @click="change3(index)">{{
          item.name
        }}</a>
      </div>
    </div>
    <div class="title-row">
      <div class="title-left">年份</div>
      <div v-for="(item, index) in nf">
        <a :class="{ blue: changeNf == index }" @click="change4(index)">{{
          item.name
        }}</a>
      </div>
    </div>
    <div class="title">
      <span>项目审批管理</span>
    </div>
    <div class="subtitle" >
      <span>排序选择</span>
      <span>时间 <i class="el-icon-bottom"></i></span>
    </div>
    <el-row :gutter="20">
      <el-col :span="18"
        ><el-table :data="list" border style="width: 100%">
          <el-table-column prop="nf" label="年份" >          </el-table-column>
          <el-table-column prop="title" label="项目名称">
            <template slot-scope="scope">
              <a
                href="#/biddetail"
                target="_blank"
                v-if="scope.row.title == '襄阳市疾病预防控制中心迁建项目'"
                style="color: blue"
                >{{ scope.row.title }}</a
              >
              <a v-else>{{ scope.row.title }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="dm" label="项目代码" width="180">
          </el-table-column>
          <el-table-column prop="xmlx" label="项目类型"> </el-table-column>
          <el-table-column prop="wt" label="步骤1">
          </el-table-column>
          <el-table-column prop="pfsx" label="步骤2">
          </el-table-column>
         
        </el-table></el-col
      >
      <el-col :span="6"
        ><el-steps style="height:30vh" direction="vertical" :active="1">
          <el-step title="项目开始时间"></el-step>
          <el-step title="项目建议书批复时间"></el-step>
          <el-step
            title="可行性研究报告开始时间"
          ></el-step> </el-steps
      ></el-col>
    </el-row>

    <!--<div>
      <card-list :list="list" :no="1">
        <el-row :gutter="21" style="display: flex; justify-content: center; flex-wrap: wrap;">
          <el-col :span="7" v-for="(item,index) in list" :key="index">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <router-link to="/biddetail"><span
                    style="display: flex; justify-content: center; align-items: center; color: blue;">{{item.title}}</span>
                </router-link>
              </div>
              <div style="width: 100%;">
                <el-col style="margin-bottom: 15px;">
                  <div class="box" v-for="(item2, index) in item.tableArr" :key="index">
                    <div class="content1">{{ item2.key }}</div>
                    <div class="content2">{{ item2.value == "" ? "待完善" : item2.value }}</div>
                  </div>
                </el-col>
              </div>
              <div class="text item btn_1">
                <el-button style="width: 50%;" type="primary" plain @click="sjbxz">{{item.btn1}}</el-button>
                <el-button style="width: 50%;" type="primary" plain @click="zlxz">{{item.btn2}}</el-button>
              </div>
              <div class="text item">
                <el-button style="width: 100%;" type="primary" plain @click="sjxx">{{item.btn3}}</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </card-list> 
    </div>-->
    <!--分页-->
    <div style="float: right">
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import cardList from "@/components/card/index.vue";
export default {
  components: {
    cardList,
  },

  methods: {
    sjbxz() {
      alert("数据包正在下载...");
      console.log("sjbxz------------------sjbxz");
      //如果存在删除文件
      this.$http
        .post(process.env.VUE_APP_BASE_API + "/common/delete", {
          sPath: "襄阳市疾病预防控制中心迁建项目",
        })
        .then((res) => {
          console.log(res);
          //重新下载文件 (地址在生产配置文件)
          this.$http
            .get(process.env.VUE_APP_BASE_API + "/common/compress", {
              params: {
                str: "sjb",
              },
            })
            .then((res) => {
              this.download(res.body.msg);
            });
        });
    },
    zlxz() {
      alert("附件资料正在下载...");
      console.log("zlxz---------------zlxz");
      //删除源文件
      this.$http
        .post(process.env.VUE_APP_BASE_API + "/common/delete", {
          sPath: "襄阳市疾病预防控制中心迁建项目",
        })
        .then((res) => {
          //重新下载
          this.$http
            .get(process.env.VUE_APP_BASE_API + "/common/compress", {
              params: {
                str: "fjzl",
              },
            })
            .then((res) => {
              console.log(res);

              //浏览器下载方法
              this.download(res.body.msg);
            });
        });
    },
    sjxx() {
      alert("审计信息！");
    },

    change1(index) {
      this.changeZgdw = index;
    },
    change2(index) {
      this.changeJsxz = index;
    },
    change3(index) {
      this.changeGllx = index;
    },
    change4(index) {
      this.changeNf = index;
    },
  },

  data() {
    return {
      changeZgdw: 0,
      changeJsxz: 0,
      changeGllx: 0,
      changeNf: 0,
      zgdw: [
        {
          no: 1,
          name: "不限",
          active: true,
        },
        {
          no: 2,
          name: "市财政局",
          active: false,
        },
        {
          no: 3,
          name: "市科技局",
          active: false,
        },
        {
          no: 4,
          name: "市人社局",
          active: false,
        },
        {
          no: 5,
          name: "市招商局",
          active: false,
        },
        {
          no: 6,
          name: "市自然规划局",
          active: false,
        },
      ],

      jsxz: [
        {
          no: 1,
          name: "不限",
        },
        {
          no: 2,
          name: "新建项目",
        },
        {
          no: 3,
          name: "续建项目",
        },
        {
          no: 4,
          name: "扩建项目",
        },
        {
          no: 5,
          name: "恢复项目",
        },
      ],
      gllx: [
        {
          no: 1,
          name: "不限",
        },
        {
          no: 2,
          name: "已报送",
        },
        {
          no: 3,
          name: "未申报",
        },
      ],

      nf: [
        {
          no: 1,
          name: "不限",
        },
        {
          no: 2,
          name: "2018年",
        },
        {
          no: 3,
          name: "2019年",
        },
        {
          no: 4,
          name: "2020年",
        },
        {
          no: 5,
          name: "2021年",
        },
      ],

      list: [
        {
          nf:"2020",
          title: "襄阳市疾病预防控制中心迁建项目",
          tableArr: [
            {
              key: "最后一次审计时间",
              value: "2020-12-31",
            },
            {
              key: "最后一次数据上报时间",
              value: "2021-01-10",
            },
          ],
          btn1: "数据包下载",
          btn2: "附件资料下载",
          btn3: "查看审计信息",
          dept: "市财政局",
          vcount: "500次浏览",
          dm: "XY_0001",
          xmlx: "应急抢救项目",
          jsxz: "新建",
          fbrq: "2020-05-06",
          t1: "项目名称",
        },
        {
          nf:"2021",
          title: "襄阳市疾病预防控制中心迁建项目",
          tableArr: [
            {
              key: "最后一次审计时间",
              value: "2020-12-31",
            },
            {
              key: "最后一次数据上报时间",
              value: "2021-01-10",
            },
          ],
          btn1: "数据包下载",
          btn2: "附件资料下载",
          btn3: "查看审计信息",
          dept: "市财政局",
          vcount: "500次浏览",
          dm: "XY_0001",
          xmlx: "村庄建设项目",
          jsxz: "新建",
          fbrq: "2020-05-06",
        },

        {
          nf:"2021",
          title: "襄阳市疾病预防控制中心迁建项目",
          tableArr: [
            {
              key: "最后一次审计时间",
              value: "2020-12-31",
            },
            {
              key: "最后一次数据上报时间",
              value: "2021-01-10",
            },
          ],
          btn1: "数据包下载",
          btn2: "附件资料下载",
          btn3: "查看审计信息",
          dept: "市财政局",
          vcount: "500次浏览",
          dm: "XY_0001",
          xmlx: "信息服务项目",
          jsxz: "新建",
          fbrq: "2020-05-06",
        },
        {
                    nf:"2020",
          title: "襄阳市疾病预防控制中心迁建项目",
          tableArr: [
            {
              key: "最后一次审计时间",
              value: "2020-12-31",
            },
            {
              key: "最后一次数据上报时间",
              value: "2021-01-10",
            },
          ],
          btn1: "数据包下载",
          btn2: "附件资料下载",
          btn3: "查看审计信息",
          dept: "市财政局",
          vcount: "500次浏览",
          dm: "XY_0001",
          xmlx: "政府项目",
          jsxz: "新建",
          fbrq: "2020-05-06",
        },
        {
          nf:"2020",
          title: "襄阳市疾病预防控制中心迁建项目",
          tableArr: [
            {
              key: "最后一次审计时间",
              value: "2020-12-31",
            },
            {
              key: "最后一次数据上报时间",
              value: "2021-01-10",
            },
          ],
          btn1: "数据包下载",
          btn2: "附件资料下载",
          btn3: "查看审计信息",
          dept: "市财政局",
          vcount: "500次浏览",
          dm: "XY_0001",
          xmlx: "市本级存储",
          jsxz: "新建",
          fbrq: "2020-05-06",
        },
        {
          nf:"2020",
          title: "襄阳市疾病预防控制中心迁建项目",
          tableArr: [
            {
              key: "最后一次审计时间",
              value: "2020-12-31",
            },
            {
              key: "最后一次数据上报时间",
              value: "2021-01-10",
            },
          ],
          btn1: "数据包下载",
          btn2: "附件资料下载",
          btn3: "查看审计信息",
          dept: "市财政局",
          vcount: "500次浏览",
          dm: "XY_0001",
          xmlx: "其他",
          jsxz: "新建",
          fbrq: "2020-05-06",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.margin1-top {
  margin-top: 65px;
}
.title-row {
  background-color: #f3f3f3;
  display: flex;
  align-items: center;
}

.title-row div {
  padding: 10px;
}

.title-left {
  background-color: #dbdbdb;
  width: 200px;
  text-align: center;
}

.text {
  font-size: 14px;
}

.title {
  font-size: 25px;
  color: #000000;
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 5px solid #000;
}
.subtitle{
    padding: 10px 0;
}
.subtitle span:first-child{
  background-color:pink;
  padding: 5px;
}

.subtitle span:last-child{
  background-color:palevioletred;
  padding: 5px;
  color: white;

}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 360px;
  margin: 10px;
}

#app {
  width: 100%;
  padding: 10px;
}

.box {
  width: 100%;
  height: 40px;
  display: flex;
  border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
}

.content1 {
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  color: #333;
  font-size: 14px;
}

.content2 {
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  color: #b0b0b2;
  font-size: 14px;
}

.btn_1 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.head_btn {
  display: flex;
  justify-content: center;
}

.tb_cls {
  margin-top: 20px;
}

.card_cls {
  margin-top: 10px;
}

a:hover {
  color: blue;
}

a:active {
  color: blue;
}

.blue {
  color: blue;
}
</style>
